Javascript中的类型转换

Javascript为什么会有类型转换

Javascirpt世界里，不推荐大量的使用try...catch...，我想大概原因：

• JS里任何类型之间的算数运算，逻辑运算和位运算都不会抛异常或者错误。例如 1/0 == Infinity， 0/0 = NaN， [ ] + 1 = '1' 等。所以catch到excepton／error的几率，相对于编译型语言甚至于python／ruby等动态语言，是大大地降低了。

• try...catch...会在catch里转换到一个新的作用域，catch里面调用本函数或者函数外的对象时，增加了一层作用域的查找，降低了运行效率

• 如果有未知的风险，确实可以try...catch...。但是如果你的代码里有比较多的try...catch...，这就是bad smell，说明需要加强coding质量或者重构了。

类型转换法则

这里讨论JS里对不同类型进行运算的时候，是如何做类型转换的（一般是隐式转换）。

加法运算

1. 1 + '-1' = '1-1'
   基本类型之间相加时，只要其一是字符串，另外一个也会先转换为字符串，结果就变成字符串的连接。

2. [ ] + 1 = '1'
   引用类型和基本类型相加。引用类型先转化为基本类型。转化过程：先查看对象的valueOf()方法是否返回基本类型。数组的valueOf返回它本身，属于object类型，不是基本类型。所以再调用toString方法。空数组[]的toString返回空字符串。结果转为‘’ + 1. 返回字符串‘1’。

3. [ ] + { } = [object Object]
   引用类型之间的加法。引用类型需先转换为基本类型。 参考2，空数组[]转为空字符串。类似地空对象{ } 转换时，也先查看{ }.valueOf(). 因为 {}的valueof方法返回它自身，所以会调用{}.toString()返回‘[object Object]'。
   这样结果变成 '' + '[object Object]' = '[object Object]'

4. 1 + null = 1
   因为已经是基本类型，而且没有字符串，所以会基于number类型运算。 null转为0， 结果是 1 + 0 = 1

5. 1 + undefined = NaN
   undefined 转为NaN, so 1+ NaN = NaN

6. false + null = 0
   都是基本类型而且没有字符串，所以基于数字类型相加。 false转为0， null也为0. 结果 0 + 0 = 0

7. [1] + [2] = '12'
   分别调用toString方法以转为基本类型，得到'1'和‘2’, '1' + '2' = '12'

加法以外的算数运算

加法以外的算数运算，如果有object类型（包括数组），先转为基本类型，这和加法运算是相同的。转换过程也是先查看valueOf是否返回基本类型，如果不是，就调用toString（这里假定toString都返回string。除非谁闲着没事，非得给一对象的toString返回对象类型？）

和加法运算不同的是，转换为基本类型后，所有的基本类型再转为number类型，最终以number类型进行运算。

1. 1 - "-1" = "-1"
   字符串“-1”转为number的-1， 结果1 - (-) = 2

2. [ ] - 1 = -1
   [ ]先转为基本类型，是空字符。空字符再转为number为0 ，结果是0 - 1 = -1

3. [ ] / { }
   空数组转为基本类型是空字符，空对象转为基本类型是[object Object]，二者再分别转为数字类型是 0 和 NaN，最终结果为0/NaN = NaN

4. 1 / null
   都已经为基本类型，所以只要把null转为number类型的0， 然后1 / 0 = Infinity

5. 1 * undefined
   都已经为基本类型，所以只要把undefined转为number类型的NaN， 然后1 * NaN = NaN

逻辑运算

1. 1 && null = null.
   因为1 是真值，则返回第二个值， 即null

2. null && undefined = null
   返回null，因为null是falsy，则返回第一个。

3. 0 || {} = {}
   返回 {}. 因为0 是falsy，返回第二个

4. 1 || null = 1
   返回1， 因为1是真值，返回第一个

位运算

1. ~n = -(n+1)，
   例如~25 = -26. 这里是带符号的取反。如果是无符号的取反，结果就不一样了，有兴趣的可以在C语言里试试 ~25u

2. ~null = -1
   null转为0， ～0 = -(0+1) =-1

3. ~undefined //SyntaxError: Invalid or unexpected token

4. ~~23.5 = 23 ~~-23.5 = -23
   但 Math.floor(-23.5) = -24. 故而一般用～～取整数位

If 运算

if(-1) 和if (-1 == true) 是不一样的。前者是真假判断: -1是truthy,是真值。后者类似算术运算:先转为number，true 转为1， 故而 -1 == 1是假值。

小结

这里总结了js类型转换和运行的基本规律，希望是可以满足基本的项目需要了。

后记

JS不同类型之间的类型转换，确实是让人挠头的语言。我猜想可能是JS产生的时候，web方兴未艾，web工程师的编程功底还没有很规范（至少没有今天这么多资料书籍和培训机构等），所以js允许类型转换，不同类型之间运算时，保证不抛异常或者尽量少抛。

但是现在前端和后端一样的庞大了，显然js的这样那样的技法往往会使工程师掉入陷阱。typescript应允而生，一个目的是也是帮助初级工程师写出还可以的代码（另外一个目的估计是降低后端开发者写前端的门槛和思维转变）。从这角度解读，ts也是为满足项目工程和公司的需要。如果想深入js学习，原生的js（es5/6）是绕不开的。

补证

前面提到“try...catch...会在catch里转换到一个新的作用域”，这是在《你不知道的JavaScript》中卷里看到的。后来感觉还是做些论证，否则老觉得不踏实。看如下代码：

function testException() {
    var error = 'outer error'
    try {
        throw 'inner error'
    } catch (error) {
        console.log(error)
        error = 'modify inner error'
    }
    
    // 这里会输出 outer error（而不是modify inner error），
    // 说明catch...里修改的error，不是testExecution()函数作用域里的，而是一个“新”作用域里的error
    // 所以我们可认为，catch...创建了一个新的作用域。看来它和函数作用域的类似点，都接受“参数”
    console.log(error) 
}

testException()